<template>
  <div>
    <el-card class="box-card loginCl">
      <div class="text item">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">

          <el-form-item label="员工ID">
            <el-input v-model="sizeForm.fkDeptId"></el-input>
          </el-form-item>

          <el-form-item label="职位">
            <el-input v-model="sizeForm.infoJob"></el-input>
          </el-form-item>

          <el-form-item label="薪水">
            <el-input v-model="sizeForm.infoSalary"></el-input>
          </el-form-item>

          <el-popover
              placement="right"
              width="400"
              trigger="click">
            <el-card class="box-card">

              <div v-if="add === true" class="text item">
                添加成功
              </div>
              <div v-else-if="add === false" class="text item">
                添加失败
              </div>

            </el-card>

            <el-button slot="reference" @click="onSubmit1">添加</el-button>
          </el-popover>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Dept",
  data() {
    return {
      role:'/1',
      sizeForm: {
        fkDeptId: '',
        infoJob: '',
        infoSalary: '',
        infoTime: ''
      },
      add:''
    };
  },
  methods: {
    onSubmit1() {
      // eslint-disable-next-line no-unused-vars
      let url = 'api/deptinfo/postform'+this.role  //http://127.0.0.1.:8080/deptinfo/postform/1
      // eslint-disable-next-line no-unused-vars
      let fd = new FormData()
      fd.append("fkDeptId",this.sizeForm.fkDeptId)
      fd.append("infoJob",this.sizeForm.infoJob)
      fd.append("infoSalary",this.sizeForm.infoSalary)
      fd.append("infoTime",this.sizeForm.infoTime)
      this.$axios.post(url,fd).then(
          // eslint-disable-next-line no-unused-vars
          r=>{
            if (r.data === true){
              this.add = true
              console.log(this.add)
            }else {
              this.add = false
            }
      })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.loginCl{
  margin:30% 60% 50% 5%;
  width:40%
}
.row-class{
  margin-right: 15%;
  margin-left: 10%;
}
</style>